<template>
  <div class="window-controls">
    <n-button @click="minimizeWindow">最小化</n-button>
    <n-button @click="toggleMaximizeWindow">{{ isMaximized ? '恢复' : '最大化' }}</n-button>
    <n-button @click="maximizeWindow">最大化</n-button>
    <n-button @click="closeWindow">关闭</n-button>
    <n-button @click="openChildWindow">打开子窗口</n-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useWindowManager from "@/hooks/windowManager";
const {
  createWindows,
  minimize,
  maximize,
  toggleMaximize,
  close,
  onWindowMessage
} = useWindowManager();

const isMaximized = ref(false);


const openChildWindow = () => {
  createWindows({
    label: 'child',
    title: '子窗口',
    url: '/child',
    minWidth: 400,
    minHeight: 300,
    width: 600,
    height: 400,
    resizable: true
  });

};
// 监听子窗口消息
onWindowMessage('child-message', (payload) => {
  console.log('Received from child:', payload);
});



// 窗口控制方法
const minimizeWindow = async () => {
  await minimize('child'); // 最小化窗口
};

const maximizeWindow = async () => {
  await maximize('child'); // 最大化窗口
};

const toggleMaximizeWindow = async () => {
  await toggleMaximize('child'); // 切换最大化/还原
};

const closeWindow = async () => {
  await close('child'); // 关闭窗口
};

</script>
